<template>
  <view>
    <u-navbar :is-back="true" title="商户数据"  :custom-back="BackM"  back-text="">
     <!-- -->
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view style="padding: 0rem 0.5rem; display: flex; align-items: center">
          <!-- <view style="
font-size: 0.75rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >员工规则</view> -->

          <!-- <image style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../../style/image/my/bottomArrow.jpg" alt=""> -->
        </view>
      </view>
    </u-navbar>

    <view class="yu-calendar">
     
      <view
        class="yu-calendar-header"
        :style="{ background: bgColor, color: color }"
      >
        <image  @click="prevMonth" style="width:1rem;height:1rem" src='../../style/image/stati/leftArrow.svg' >
        <view class="header-center">{{ year + "年" + selectMonth }}月</view>
        <image v-if="canFlag==true"  @click="nextMonth" style="width:1rem;height:1rem" src='../../style/image/stati/rightArrow.svg' >
         <image v-else  @click="nextMonth" style="width:1rem;height:1rem" src='../../style/image/stati/rightArrow.svg' >
        
        <!-- <view class="header-right" @click="nextMonth()">下</view> -->
      </view>

      <div class="prolify" >
        <div class="prolify-item" >商户收益：</div>
        <div>我的收益：</div>
      </div>

      <!-- 星期 -->
      <view
        class="yu-calendar-week"
        :style="{ background: bgColor, color: color }"
      >
        <view style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 400;
text-align: center;
color: #000000;"  class="list" v-for="(week, idx) in weeks" :key="idx">{{
          week
        }}</view>
      </view>

      <view class="yu-calendar-content">
        <view class="yu-calendar-day">
          <view
            class="list"
            v-for="(day, idx) in dayArr"
            :key="idx"
            @click="onClick(day, idx)"
          >
            <view
              class="day"
              :style="{ background: day.bgColor, color: day.color }"
              v-if="day.date != localDate"
              >{{ day.date }}</view
            >
            <view
              class="day"
              :style="{ background: localColor, color: color }"
              v-else
              >{{ day.date }}</view
            >
            <view class="price">{{ day.money }}</view>
          </view>
          <view class="local-month">{{ selectMonth }}</view>
        </view>
      </view>

          <div class="" style="background: #f3f5f7;height:0.66rem" ></div>

            <div style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 300;
display: flex;
align-items: center;
color: #000000;">
              <view  style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >设备:</view>{{sarningsTerminal==null?'暂无设备':sarningsTerminal}}
            </div>

            <div class="hr" style="background: #f3f5f7;height:0.2rem" ></div>


            <div style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 300;
display: flex;
align-items: center;
color: #000000;">
              <view  style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;" >商户地址:</view>{{shopInfo.address==null?'暂无':shopInfo.address}}
            </div>
             <div class="" style="background: #f3f5f7;height:0.2rem" ></div>

             <div>
             <view style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 400;
color: #02AF74;" >说明:</view>
             <view style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 300;">1.日期下面的金额，为您当天商户带给你的收益</view>
             </div>


    </view>
  </view>
</template>
<script>
import { calendarStatic } from "../../utils/uniApi";
export default {
  name: "yuCalendar",
  props: {
    priceList: {
      //价格日历数组
      type: [Array, Object],
      default: function () {
        return [];
      },
    },
    bgColor: {
      type: String,
      default: function () {
        return "#ffffff";
      },
    },
    color: {
      type: String,
      default: function () {
        return "#000";
      },
    },
  },
  data() {
    return {
      date: new Date(), //获取系统日期
      localDate: "", //当前日期
      selectMonth: "", //选择的月份
      localColor: "#3570cc", //今日的日期背景颜色
      weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      dayArr: [], //月份天数

      year: "", //当前选择的年

      month: "", //当前选择的月

      status: 1,
      nowDate: 1,

      canFlag: true,
      shopId: "", //传递的商户数据
      a:
        "设备：1676567、6876987、1676567、6876987、1676567、6876987、1676567、6876987、1676567、6876987、1676567、6876987、",
      sarningsTerminal: "",
      shopInfo: {
        address: "",
      },
    };
  },
  mounted() {
    uni.showLoading({
      title: "加载中",
    });
    this.year = this.date.getFullYear();

    this.month = this.date.getMonth();

    console.log(this.year, this.month, "12321312321312");

    this.initDate(this.date.getFullYear(), this.date.getMonth());
  },
  onPullDownRefresh() {
    console.log("refresh");

    setTimeout(function () {
      uni.redirectTo({
        url: "../../pages/stati/actData",
      });
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad(option) {
    console.log(option, "optionoptionoption");

    this.shopId = option.data;
	// console.log(this.shopId ,'shopiddddddd')
  },
  methods: {
    //初始化日期
    initDate(year, month) {
      console.log(year, month, "year, month+1是本月");

      let weekValue = "";
      let localYear = this.date.getFullYear();
      console.log(localYear, "localYear", "当前年2020");
      let localMonth = this.date.getMonth() + 1;
      console.log(localMonth, "localYear", "当前月");

      this.nowDate = localMonth;

      let day = this.date.getDate();
      console.log(day, "day", "当前day");

      let totalDay = new Date(year, month + 1, 0).getDate();
      console.log(totalDay, "totalDay", "这个月有多少天");

      this.dayArr = [];

      this.selectMonth = month + 1; //当前月份

      this.localDate =
        this.formatNum(localYear) +
        "-" +
        this.formatNum(localMonth) +
        "-" +
        this.formatNum(day);

      let realMonth = Number(month) + Number(1);
      console.log(
        this.localDate,
        "今天的数据",
        this.formatNum(localYear) + "-" + realMonth
      );
      let params = {
        shopId: this.shopId,
        userId:
          uni.getStorageSync("userId") == ""
            ? ""
            : parseInt(uni.getStorageSync("userId")),
        dateTime: this.formatNum(localYear) + "-" + realMonth,
      };

      calendarStatic(params).then((res) => {
        console.log(res.data.data,'+++代理');

        this.shopInfo = res.data.data.shopInfo;

        this.sarningsTerminal = res.data.data.sarningsTerminal;

        this.dayArr = res.data.data.userSarningsList;

        uni.hideLoading();

        // for (let i = 1; i <= res.data.data.userSarningsList; i++) {

        //     let dayDate =
        //       this.formatNum(year) +
        //       "-" +
        //       this.formatNum(month + 1) +
        //       "-" +
        //       this.formatNum(i);

        //     let obj = {
        //       date: dayDate,
        //       day: i,
        //       price: "",
        //       bgColor: "none",
        //       color: "#000",
        //       status: 1,
        //     };

        //     // console.log(obj, "obj");

        //     // weekValue = (new Date(year, month, i)).getDay();

        //     // if (i == 1 && weekValue != 0) {
        //     // 	this.addBeforeValue(weekValue)
        //     // }
        //     // let index = this.priceList.findIndex((item) => {
        //     // 	return item.date == dayDate
        //     // })
        //     // if (index >= 0) {
        //     // 	obj.price = this.priceList[index].price;
        //     // }

        //     // //设置点击灰色日期跳转后的默认值
        //     // if (i == 1 && this.status == 0) {
        //     // 	obj.bgColor = this.bgColor;
        //     // 	obj.color = this.color;
        //     // }
        //     // if (i == totalDay && this.status == 2) {
        //     // 	obj.bgColor = this.bgColor;
        //     // 	obj.color = this.color;
        //     // }
        //     this.dayArr.push(obj);
        // 	console.log(this.dayArr)
        //     // if (i == totalDay && weekValue != 6) {
        //     // 	this.addAfterValue(weekValue)
        //     // }
        //   }
      });
    },
    //补充前面空白日期
    addBeforeValue(weekValue) {
      let totalDay = new Date(this.year, this.month, 0).getDate();
      for (let i = 0; i < weekValue; i++) {
        let obj = {
          date: "",
          day: "",
          price: "",
          bgColor: "none",
          color: "#ccc",
          status: 0,
        };
        obj.day = totalDay - (weekValue - i) + 1;
        this.dayArr.push(obj);
      }
    },
    //补充后空白日期
    addAfterValue(weekValue) {
      let totalDay = new Date(this.year, this.month, 0).getDate();
      for (let i = 0; i < 6 - weekValue; i++) {
        let obj = {
          date: "",
          day: "",
          price: "",
          bgColor: "none",
          color: "#ccc",
          status: 2,
        };
        obj.day = i + 1;
        this.dayArr.push(obj);
      }
    },

    //日期时间的格式化方法
    formatNum(num) {
      return num < 10 ? "0" + num : num + "";
    },
    //上一个月
    prevMonth() {
      console.log(this.month, "this.month");

      if ((this.nowDate = this.month)) {
        this.canFlag = false;
      } else {
        this.canFlag = true;
      }

      if (this.month == 0) {
        this.year -= 1;
        this.month = 11;
      } else {
        this.month -= 1;
      }
      this.initDate(this.year, this.month);
    },
    //下一个月
    nextMonth() {
      if ((this.nowDate = this.month)) {
        this.canFlag = false;
      } else {
        this.canFlag = true;
      }

      if (this.month == 11) {
        this.year += 1;
        this.month = 0;
      } else {
        this.month += 1;
      }
      this.initDate(this.year, this.month);
    },
    //输出
    onClick(obj, index) {
      console.log(123);
      //查询当天的日期下标
      let _this = this;
      let idx = _this.dayArr.findIndex((item) => {
        return item.date == _this.localDate;
      });
      if (index === idx) {
        _this.localColor = _this.bgColor;
      } else {
        _this.localColor = "#d4e5ff";
      }
      if (_this.dayArr[index].status == 0) {
        _this.status = 0;
        _this.prevMonth();
        return;
      }
      if (_this.dayArr[index].status == 2) {
        _this.status = 2;
        _this.nextMonth();
        return;
      }
      if (_this.dayArr[index].status == 1) {
        _this.$nextTick(() => {
          _this.dayArr[index].bgColor = _this.bgColor;
          _this.dayArr[index].color = _this.color;
        });
        for (let i = 0; i < _this.dayArr.length; i++) {
          if (_this.dayArr[i].status == 1 && i != index) {
            _this.$nextTick(() => {
              _this.dayArr[i].bgColor = "none";
              _this.dayArr[i].color = "#000";
            });
          }
        }
      }
      const dataObj = {
        date: obj.date,
        day: obj.day,
        price: obj.price,
      };
      this.$emit("click", dataObj);
    },
    BackM() {

      console.log("");
      uni.switchTab({
        url: "./index",
      });

    },onBackPress() {

    console.log('1111-onBackPressonBackPress')

    uni.switchTab({
      url: "./index",
    });
    return true;

  }
  },
};
</script>

<style scoped>
.yu-calendar-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #0086ff;
  color: #fff;
  justify-content: center;
}

.yu-calendar-header .header-left {
  font-size: 14px;
}

.yu-calendar-header .header-center {
  text-align: center;
  /* -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1; */
  font-size: 16px;
  font-weight: bold;
  padding: 0.1rem 1rem;
}

.yu-calendar-header .header-right {
  font-size: 14px;
}

.yu-calendar-week {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background: #0086ff;
  color: #fff;
  padding: 0 5px;
}

.yu-calendar-week .list {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  font-size: 15px;
  line-height: 40px;
}

.yu-calendar-day {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 5px;
  position: relative;
  min-height: 6rem;
}

.yu-calendar-day .list {
  width: 14.28%;
  height: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.yu-calendar-day .list .day {
  display: inline-block;
  border-radius: 18px;

  font-size: 0.63rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}

.yu-calendar-day .list .price {
  font-size: 0.68rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #02af74;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yu-calendar-day .local-month {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  font-size: 1px;
  width: 100px;
  height: 140px;
  margin-top: -70px;
  margin-left: -50px;
  text-align: center;
  color: #f5f6f7;
}

.prolify {
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 0.68rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #02af74;
  margin: 0rem 0.2rem;
}
</style>
